<template>
		<!-- 商品 -->
	<van-checkbox v-model="item.checked" v-for="item in cartList" :key="item.id">
			<van-card
				:num="item.number"
				:price="item.retail_price"
				:title="item.goods_name"
				:thumb="item.list_pic_url"
			/>
	</van-checkbox>
	<!-- 提交订单栏 -->
	<div>
		<van-submit-bar :price="money*100" button-text="提交订单" @submit="onSubmit">
			<van-checkbox v-model="select">全选</van-checkbox>
			<template #tip>
				你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
			</template>
		</van-submit-bar>
	</div>
</template>

<script>
import axios from 'axios';
import { Toast } from 'vant';

export default {
	data(){
		return {
			cartList:[],
			checked:0
		}
	},
	created(){
		axios.get("/api/cart/index").then((res)=>{
			console.log(res);
			this.cartList=res.data.data.cartList
		})
	},
	computed:{
		money(){
            return this.cartList.reduce((prev,next)=>prev+(next.checked?next.retail_price*next.number:0),0)
        },
		select:{
			get(){  // 获取
             return this.cartList.every(item=>item.checked)
			},
			set(checked){  // 设置
				console.log(checked);
				this.cartList.forEach(item=>item.checked=checked)
			 }
         
       },
	},
  methods:{
		onSubmit(){
			Toast('跳转支付');
		},
		onClickLink(){
			Toast('修改地址');
		},
		
	},

}
</script>
<style scoped>
/* 商品 */
:deep(.van-card){
	background-color: white;
}
:deep(.van-checkbox__label){
	flex: 1;
}
/* 提交订单栏 */
:deep(.van-submit-bar){
	bottom: 1.33333rem;
}
</style>